<template>
  <div class="hello">
    <headerjifen></headerjifen>
    <main>
    <div class="kong"></div>
    <div class="top">
      <div class="shang">
        当前积分：{{fen.jifen}}分
      </div>
      <div class="xia">
        <div>
        <router-link to="details">
          <img src="../assets/img/m14.png"><p>积分明细</p>
        </router-link>
        </div>
        <div>
          <router-link to="duihuanjilu">
          <img src="../assets/img/m15.png"><p>兑换记录</p>
          </router-link>
        </div>
      </div>
    </div>
    <div class="kong"></div>
    <div class="tu">
      <img src="../assets/img/m16.png" >
    </div>
    <div class="kong"></div>
    <div class="tuijian">
      <div class="top">
        为你推荐
      </div>
      <div class="neirong">
      <router-link to='lipinjifen' v-for="item in tuijia" :key="item">
        <dl>
          <dt><img src="../assets/img/m18.png"></dt>
          <dd>
              <p><span>{{item.name}}</span></p>
              <p>{{item.jianjie}}</p>
              <p>库存：{{item.kucun}}张</p>
          </dd>

        </dl>
        </router-link>
        
      </div>
    </div>
    </main>
  </div>
</template>

<script>
import headerjifen from './jifen'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      fen: {
        jifen: '500'
      },
      tuijia: [
        {imgsrc: '../assets/img/m18.png', name: '充值卡', jianjie: '沟通你我', kucun: '100'},
        {imgsrc: '../assets/img/m17.png', name: '充卡', jianjie: '沟我', kucun: '10'},
        {imgsrc: '../assets/img/m19.png', name: '卡', jianjie: '沟我', kucun: '150'},
        {imgsrc: '../assets/img/m20.png', name: '充卡', jianjie: '沟通我', kucun: '1800'}

      ]
    }
  },
  components: {headerjifen}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
.hello{
  .padding(140,0,0,0);
}
main{
  .kong{
    .height(20);
    background: #f3f1f2;
  }
  .top{
    .shang{
      text-align: center;
      .line-height(90);
      .font-size(40);
    }
    .xia{
       .height(100);
      display: flex;
      justify-content: space-between;
      .padding(0,58,0,58);
      align-items: center;
      div{
        a{
          display: block;
        display: flex;
        img{
        .height(48);
        display: block;

        }
        p{
          .line-height(48);
          .font-size(30);
        }
        }
      }
    }
  }
  .tu{
    img{
      width: 100%;
    }
  }
  .tuijian{
    .top{
      .padding(40,0,20,40);
      .font-size(30);

    }
    .neirong{
      display: flex;
      flex-wrap: wrap;
      a{
        width: 50%;
        display: block;
        text-decoration: none;
        dl{
          
          display: flex;
          .padding(20,0,20,40);
          dt{
            img{
              .height(140);
               .padding(0,20,0,0);
            }
          }
          dd{
            p{
              .line-height(47);
              color:#bebebe;
              span{
                color: black;
              }
            }
          }
        }
      }
    }
  }
}
</style>
